<template>
  <div>
    <Header title="收货地址"/>
    <van-address-list
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />

  </div>
</template>

<script>
import { reactive,toRefs, onMounted } from 'vue'
import Header from '../../components/Header.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
    components:{ Header },
    setup(){
        const store  = useStore()
        const router = useRouter()

        const data = reactive({
            list:[]
        })

        //地址初始化：获取状态管理中的地址数据，渲染页到页面上
        const init = ()=>{
            data.list = store.state.userAddress.map(item=>{
                return {
                    id:item.id,
                    name:item.name,
                    tel:item.tel,
                    address:`${item.province}${item.city}${item.county}${item.addressDetail}`,
                    isDefault:item.isDefault
                }
            })
        }
        const onAdd = (item)=>{ router.push({
            path: '/addressedit',
            query:{
                type:'add'
            }
        })}
        const onEdit = (item)=> {
            router.push({
                path: '/addressedit',
                query: {
                    id: item.id,
                    type: 'edit'
                }
            })
        }
        //挂载
        onMounted(()=>{
            init()
        })

        return {
            onAdd,onEdit,...toRefs(data), router
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on {
  background-color: #ffc400;
}
/deep/ .van-radio__icon {
  display: none;
}
</style>